<template>
	<view class="storeBox">
		<view class="top" @click="goToBack">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
			<view class="">{{timeBegin}}订单列表</view>
		</view>
		<view class="orderContent">
			<view class="orderList" v-for="(item,index) in orderList" :key="index">
				<view class="">
					<view class="">
						<view class="">地址: <text>{{item.supplyAddress}}</text></view>
						<view class="">序号: <text>{{item.pickingSerialNo}}</text></view>
						<view class="">姓名: <text>{{item.nameTakingMeal}}</text></view>
					</view>
					<view class="foods">
						<view class="">菜品: </view>
						<text v-for="(foodItem,foodIndex) in item.hcOrderDetailedList" :key="foodIndex">
							<text>{{foodItem.tradeName}}</text>
							<text :class="{'error':foodItem.commodityQuantity>1}">x{{foodItem.commodityQuantity}}</text>
							<text v-if="foodIndex!=item.hcOrderDetailedList.length-1">,</text>
						</text>
						<!-- <view class="det" v-for="(foodItem,foodIndex) in item.hcOrderDetailedList" :key="foodIndex">
							<text>{{foodItem.tradeName}}</text>
							<text :class="{'error':foodItem.commodityQuantity>1}">x{{foodItem.commodityQuantity}}</text>
							<text v-if="foodIndex!=item.hcOrderDetailedList.length-1">,</text>
						</view> -->
						<!-- <text>{{item.nameDishes}}</text> -->
					</view>
					<view class="">
						<view class="note">备注: <text>{{item.remarks?item.remarks:'无'}}</text></view>
					</view>
					<view class="">
						<view class="">付款时间: <text>{{item.createTime}}</text></view>
					</view>
					<view class="">
						<view class="">收入: <text>￥{{item.commodityPrice}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getStoreSystemInfo,
		getDetStoreGoodList,
		exportExcelById,
		changeStoreState
	} from '@/utils/req/api.js'
	import MyFooter from '@/components/footer/footer.vue'
	export default {
		components: {
			MyFooter
		},
		data() {
			return {
				orderList: [],
				timeBegin: ''
			}
		},
		onLoad(options) {
			let {
				timeBegin
			} = options;
			this.timeBegin = timeBegin
		},
		onShow() {
			this.getStoreGoodList();
		},
		methods: {
			goToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取商家订单信息
			async getStoreGoodList(type) {
				let res = await getDetStoreGoodList({
					pageNo: 1,
					pageSize: -1,
					timeBegin: this.timeBegin
				})
				if (type != 'push') {
					this.orderList = res.data.result.records;
				} else {
					this.orderList = [...this.orderList, ...res.data.result.records]
				}
				this.orderList.forEach(item => {
					item.checked = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 150rpx;
		min-height: 100vh;
	}

	.top {
		background-color: #fff;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 2;

		image {
			width: 30rpx;
			height: 30rpx;
			transform: rotate(90deg);
			position: absolute;
			left: 40rpx;
			top: calc((100% - 30rpx) / 2);
		}
	}

	.topMenu {
		padding: 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		@include flex(flex-start, flex-start);

		>view {
			margin-right: 30rpx;
			font-size: 40rpx;
			line-height: 56rpx;
			color: rgba(0, 0, 0, .35);

			>view:nth-child(2) {
				width: 40rpx;
				height: 8rpx;
				background: #F1B825;
				margin: 0 auto;
				margin-top: 10rpx;
				display: none;
			}
		}

		>.check {
			color: #000;

			>view:nth-child(2) {
				display: block;
			}
		}
	}

	.warn {
		background-color: #F6E2D4;
		color: #FA690A;
		font-size: 28rpx;
		line-height: 2;
		padding: 10rpx 60rpx;
	}

	.notice {
		@include flex(flex-start, flex-start);
		padding: 40rpx;
		background-color: #fff;
		color: rgba(0, 0, 0, 0.55);

		>view {
			font-size: 28rpx;
			line-height: 1.5;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}

	.menuContent {
		padding: 40rpx;
		background-color: #fff;
		margin-top: 20rpx;

		>view {
			@include flex(space-between, center);
			font-size: 28rpx;
			line-height: 2;
			margin-bottom: 20rpx;
			background-color: #f5f5f5;
			padding: 15rpx 20rpx;
		}

		>.menuTop {
			color: rgba(0, 0, 0, 0.55);
		}

		.total {
			@include flex(flex-end, center);
			background-color: #fff;
			padding-right: 0;
			color: rgba(0, 0, 0, 0.55);

			text {
				color: #000;
				margin-left: 10rpx;
			}
		}
	}

	.storeState {
		padding: 40rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
			line-height: 2;
			font-weight: bold;

			text {
				margin-left: 10rpx;
				font-weight: 100;
			}

			.error {
				color: #E06262;
			}

			.ing {
				color: #6ABCEB;
			}

			.success {
				color: #7CCF85;
			}
		}

		.state {
			@include flex(space-between, center);
			margin-top: 20rpx;

			>view {
				width: 28%;
				border-radius: 100rpx;
				// border: 1px solid #F1B825;
				// color: #F1B825;
				background-color: #FA690A;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				line-height: 2;
				padding: 5rpx 0;
				position: relative;

				.num {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #FD2A2A;
					font-size: 24rpx;
					line-height: 30rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}


	.orderContent {
		margin-top: 20rpx;

		.allCheck {
			@include flex();
			font-size: 28rpx;
			line-height: 2;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			padding: 10rpx 40rpx;

			uni-checkbox {
				margin-right: 10rpx;
			}
		}

		.orderList {
			@include flex(flex-start, flex-start);
			font-size: 32rpx;
			line-height: 2;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 40rpx;

			uni-checkbox {
				margin-right: 10rpx;
			}

			>view {
				@include flex(flex-start, flex-start);
				flex-direction: column;
				width: 100%;
				flex-wrap: wrap;

				>view {
					width: 100%;
					@include flex();
					flex-wrap: wrap;
					// color: rgba(0, 0, 0, 0.55);
					color: #000;

					text {
						color: #000;
						margin: 0 20rpx;
					}

				}

				>.foods {
					@include flex(flex-start, flex-start);
					flex-wrap: wrap;
					line-height: 1.5;

					text {
						margin-left: 10rpx;
						margin-right: 0;
						text {
							margin: 0;
						}
					}

					>.det {
						// flex: 1;
						// margin-left: 20rpx;

						text {
							margin-left: 0;
							margin-right: 4rpx;
						}

						.error {
							color: red;
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				>.w30 {
					>view {
						width: calc(100% / 3);
					}
				}

				>.w10 {
					@include flex(flex-start, flex-start);

					>view:nth-child(2) {
						@include flex();
						flex-wrap: wrap;

						>view {
							width: 50%;
							color: #000;
							padding-left: 10rpx;
						}
					}
				}

				>.w50 {
					.note {
						font-size: 32rpx;
						line-height: 2;
					}

					>view {
						// width: 50%;
					}
				}
			}


		}
	}
</style>
<style lang="scss">
	.storeBox {
		/deep/.uni-checkbox-input {
			border-radius: 50%;
			width: 35rpx;
			height: 35rpx;
			// border-color: #FA690A !important;
		}

		/deep/.uni-checkbox-input-checked {
			color: #FA690A !important;
			border: 1px solid #FA690A !important;
		}
	}
</style>
